<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝学网</title>
    <link rel="shortcut icon" href="./兰/images/logo.png">
    <style>
        html,
        body {
            width: 100%;
            margin: 0px;
            background-color: #e8edefad;
        }

        li {
            list-style: none;
        }

        h2 {
            text-align: center;
        }

        ul,
        ol {
            list-style: none;
            display: flex;
        }

        a {
            text-decoration: none;

        }

        /* 标题 */
        .title {
            display: flex;
            width: 100%;
            height: 50px;
            background-color: rgb(200, 225, 225);
            margin: 0px;

        }

        .title>ul {
            margin-right: 10px;
            position: absolute;
            right: 0%;
        }

        .title>ul>li {
            margin-left: 50px;
        }

        .title>img {
            width: 45px;
            height: 52px;
            margin-left: 30px;
        }

        .title>input {
            border-radius: 25px/50px;
            height: 20px;
            margin-left: 200px;
            position: absolute;
            right: 45%;
            top: 15px;
            width: 15%;
        }

        #searchButton {
            margin-right: 3px;
            top: 18px;
            width: 18px;
            height: 18px;
            position: absolute;
            right: 45%;
            cursor: pointer;
        }

        /* 导航栏 */
        .nav {
            width: 100%;
            height: 60px;
            background-color: rgb(111, 187, 219);
            overflow: hidden;

        }

        .nav>ul {
            height: 60px;
            /* margin-left: 100px; */
            padding-left: 0px;
            margin-top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav>ul>li:nth-child(1) {
            height: 60px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            margin-left: 70px;
            text-align: center;

        }
        .nav>ul>li {
            height: 60px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            /* width: 200px; */
            margin-left: 70px;
            text-align: center;

        }

        .nav>ul>li>a {
            font-size: 22px;
            color: black;
            font-family: "华文新魏";
        }

        .nav>ul>li:hover {
            background-color: rgba(198, 224, 215, 0.573);
            height: 60px;
        }

        .qr {
            display: flex;
            margin-right: 10px;
        }

        .qr:hover .qr2 {
            display: block;
        }

        .qr2 {
            margin-top: 30px;
            top: 100%;
            right: 40%;
            position: absolute;
            width: 120px;
            height: 120px;
            margin-left: 10px;
            display: none;
            border: 10px white solid;
        }

        .title>ul>li>a,
        .deng>li>a {
            color: black;
            font-size: 18px;
            font-family: "华文新魏";
        }

        /* 登录和注册盒子 */
        .deng {
            display: flex;
            position: absolute;
            right: 0;
            top: 68px;
            margin-right: 10px;
        }


        .container {
            position: relative;
            width: 640px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 30px;
        }

        .container-wrapper {
            display: flex;
            position: absolute;
            padding-left: 0;
            top: 0;
            left: 0px;
            width: 1920px;
            height: 400px;
            transition: 0.3s all linear;
        }

        .img {
            width: 640px;
            height: 400px;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .container-pagination {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .container-pagination1 {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .container-pagination1 {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .dot {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 50%;
            background-color: #ccc;
        }

        .dot.active {
            background-color: #f00;
        }

        .dot1 {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 50%;
            background-color: #ccc;
        }

        .dot1.active {
            background-color: #f00;
        }

        .carousel {
            position: relative;
            width: 868px;
            height: 225px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 30px;
        }

        .carousel-wrapper {
            display: flex;
            width: 200%;
        }

        .img-page1 {
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            width: 868px;
            height: 225px;
            transition: 0.3s all linear;
            justify-content: space-between;
            z-index: 1;

        }

        .img-page2 {
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            width: 868px;
            height: 225px;
            transition: 0.3s all linear;
            justify-content: space-between;
        }

        .img1 {
            width: 202px;
            height: 225px;
        }

        .img1 img {
            width: 100%;
            height: 100%;
        }

        .placeholder {
            width: 202px;
            height: 225px;
            visibility: hidden;
        }

        /* 课程卡片 */
        .itemCard>a>div {
            position: relative;
            margin-top: 50px;
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin-left: 50px;
        }

        .itemCard>a>div>img {
            transition: all 0.5s ease;
            width: 100%;
            height: 100%;
        }

        /* .itemCard>a>div>img:hover {
            transform: scale(1.5);
        } */

        .itemCard>a>div>div {
            position: absolute;
            top: 100px;
            left: 40px;
            width: 200px;
            height: 100px;
            text-align: center;
            color: white;
            font-size: 50px;
            text-shadow: 0 0 12px black;
        }

        /* 全部课程 */
        .allClass>div {
            display: flex;
            overflow: hidden;
            width: 210px;
            height: 280px;
            margin-left: 70px;
        }

        .allClass>div>div {
            position: absolute;
            cursor: pointer;
            width: 210px;
            height: 280px;
            overflow: hidden;
        }

        .allClass>div>div>div>h4 {
            text-indent: 40px;
            text-align: center;
            position: absolute;
            top: 40px;

        }

        .box {
            width: 210px;
            height: 280px;
            position: relative;
        }

        .textbox {
            transition: all 0.4s ease;
            position: absolute;
            width: 210px;
            height: 280px;
            left: -100%;
            margin: 0px;
            background-color: bisque;
            opacity: 0.5;
        }

        .box:hover .textbox {
            left: 0%;

        }

        .allClass>div>img {
            transition: all 0.3s ease;
        }

        /* 响应式部分导航栏 */
        @media screen and (max-width:768px) {

            /* 对标题响应式 */
            .title>ul {
                margin-left: 150px;
                position: absolute;
                left: 15%;

            }

            .title>ul>li {
                margin-left: 10px;
            }

            .title>input {
                border-radius: 25px/50px;
                height: 20px;
                margin-left: 200px;
                position: absolute;
                right: 0px;
                top: 15px;
            }

            #searchButton {
                margin-right: 3px;
                top: 18px;
                width: 18px;
                height: 18px;
                position: absolute;
                right: 0px;
                cursor: pointer;
            }

            /* 对导航栏响应式 */
            .nav>ul {
                height: 60px;
                margin-left: 0px;
                padding-left: 0px;
                margin-top: 0px;
            }

            .nav>ul>li {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                margin-left: 0px;
                font-size: 12px;
            }

            /* 登录和注册盒子 */
            .deng {
                display: flex;
                position: absolute;
                right: 0px;
                top: 72px;
                font-size: 12px;
            }

            .qr2 {
                margin-top: 30px;
                top: 0px;
                right: 40%;
                position: absolute;
                width: 70px;
                height: 70px;
                margin-left: 10px;
                display: none;
                border: 10px white solid;
            }
        }

        @media screen and (max-width:1137px) {
            .nav>ul>li>a {
                font-size: 15px;
            }

            .nav>ul>li {
                margin-left: 30px;
            }
        }

        @media screen and (max-width:941px) {
            .nav>ul>li {
                margin-left: 5px;
            }

            .nav>ul {
                margin-left: -22%;
            }
        }

        @media screen and (max-width:698px) {
            .nav>ul>li {
                margin-left: -20px;
            }

            .nav>ul {
                margin-left: -30%;
            }

            .deng>li>a {
                font-size: 15px;
            }
        }
    </style>
</head>

<body>
    <!-- 整体以蓝色为基调，浅蓝、深蓝、灰蓝等等都可以使用（适合为主） -->
    <!-- 整个框架（盒子） -->
    <div>
        <!-- 顶部【logo名字（左）、搜索栏（中）、小组信息（右） -->

        <div>
            <!-- logo名字 -->
            <!-- 搜索栏(含js) -->
            <!-- 小组信息 -->
            <div class="title">
                <img src="./兰/images/logo.png" alt="">
                <input id="searchInput" placeholder="请输入关键词" type="text">
                <img id="searchButton" src="./兰/images/搜索图标.png" alt="">
                <ul>
                    <li><a href="./兰/小组.html" target="_blank">小组</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1SJhVexEeg/?vd_source=6f4b3c43be3dc4f105a985362d1dce81" target="_blank">视频</a></li>
                    <li><a href="https://gitee.com/lhuilan/final-group-task/tree/main/" target="_blank">仓库</a></li>
                </ul>
            </div>
        </div>
        <!-- 导航栏 -->
        <div>
            <!-- 主菜单 -->
            <div class="nav">
                <ul>
                    <!-- 导航栏中 -->
                    <!-- 导航栏的颜色尽量和logo颜色搭配 -->
                    <!-- 鼠标悬停在"首页、HTML、CSS、JavaScript、Photoshop、Photography"时有子菜单 -->
                    <li><a href="./index首页.html">首页</a></li>

                    <li><a href="./li/hcj.html">Web前端</a></li>
                    <li><a href="./瑜-ps/a-ps.html">Photoshop</a></li>
                    <li><a href="./兰/摄影.html">Photography</a></li>
                    <div class="deng">
                        <!-- 导航栏右 -->
                        <li class="qr">
                            <!-- 鼠标悬停时下方出现二维码 -->
                            <a href="">
                                <span>客户端下载</span>
                            </a>
                            <!-- 二维码 -->
                            <div>
                                <img class="qr2" src="./兰/images/csdn二维码.png" alt="">
                            </div>
                        </li>
                        <!-- (含js) -->
                        <li><a href="./兰/登录.html" target="_blank">登录 ||</a></li>
                        <li><a href="./兰/注册.html" target="_blank">&nbsp;注册</a></li>
                    </div>
                </ul>
            </div>

            </script>
            <!-- 轮播图（底下要有按钮）(含js) -->
            <div class="container">
                <ul class="container-wrapper">
                    <li class="img"><img src="./兰/images/web主轮播1.jpg"></li>
                    <li class="img"><img src="./兰/images/ps主轮播.jpg"></li>
                    <li class="img"><img src="./兰/images/photo主轮播1.jpg"></li>
                </ul>
                <ul class="container-pagination">
                    <li class="dot active"></li>
                    <li class="dot"></li>
                    <li class="dot"></li>
                </ul>
            </div>


            <!-- 四张卡片(鼠标悬停时图片放大一点，图片应该是作为背景图) -->
            <div class="itemCard" style="display: flex;flex-wrap: wrap;">
                <a href="./兰/讲师介绍.html">
                    <div>
                        <img src="./兰/images/讲师介绍.jpg" alt="">
                        <div>讲师介绍
                        </div>
                    </div>
                </a>
                <a href="./兰/学习事项.html">
                    <!-- 类似于 to do list(含js) -->
                    <div>
                        <img src="./兰/images/学习事项.png" alt="">
                        <div>学习事项
                        </div>
                    </div>
                </a>
                <a href="./兰/加油站.html">
                    <div>
                        <img src="./兰/images/加油站1.png" alt="">
                        <div>加油站
                        </div>
                    </div>
                </a>
                <a href="./兰/入门成果.html">
                    <div>
                        <img src="./兰/images/入门成果1.png" alt="">
                        <div>入门成果
                        </div>
                    </div>
                </a>
            </div>
            <!-- 图片放大效果 -->

            <!-- 正文 -->
            <!-- 全部课程 -->
            <h2>全部课程</h2>
            <div class="allClass" style="display: flex;overflow: hidden;flex-wrap: wrap; ">
                <!-- h2有样式框 -->
                <!-- 左图右字 -->
                <div>
                    <img class="imgbox" style="height: 280px;width: 210px;" src="./兰/images/html全部课程.png" alt="">
                    <div>
                        <div class="box">
                            <!-- span（即简介：）里面用浅灰色 -->
                            <!-- <h4>HTML课程</h4> -->
                            <p class="textbox">
                                <span>
                                    HTML课程<br>
                                    简介：</span>HTML是一种超文本标记语言，它是使用标记标签来描述网页，定义了网页内容的含义和结构。
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="imgbox" style="height: 280px;width: 210px;" src="./兰/images/css全部课程.png" alt="">
                    <div>
                        <div class="box">
                            <!-- <h4>CSS课程</h4> -->
                            <p class="textbox"><span>
                                    CSS课程<br>
                                    简介：</span>CSS指的是层叠样式表，样式定义了如何显示HTML元素，用于设计风格和布局。它可以同时控制多张网页的布局，节省了大量工作。
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="imgbox" style="height: 280px;width: 210px" src="./兰/images/js全部课程.png" alt="">
                    <div>
                        <div class="box">
                            <!-- <h4>JavaScript课程</h4> -->
                            <p class="textbox"><span>
                                    JavaScript课程<br>
                                    简介：</span>JavaScript是一种轻量级的编程语言，是可插入 HTML
                                页面的编程代码。它可以用来创建动态更新的内容，控制多媒体，制作图像动画......</p>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="imgbox" style="height: 280px;width: 210px" src="./兰/images/ps全部课程.png" alt="">
                    <div>
                        <div class="box">
                            <!-- <h4>Photoshop课程</h4> -->
                            <p class="textbox">
                                <span>
                                    Photoshop课程<br>
                                    简介：</span>Photoshop是一个图像处理软件，简称PS。它具有简洁的操作界面以及丰富的工具，深受设计师们的喜爱。它可以有效地进行图片编辑、裁剪、色彩调整、修复等功能，同时它还涉及到图形、文字方面的设计。
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="imgbox" style="height: 280px;width: 210px" src="./兰/images/photo全部课程.png" alt="">
                    <div>
                        <div class="box">
                            <!-- <h4>Photography课程</h4> -->
                            <p class="textbox">
                                <span>
                                    Photography课程<br>
                                    简介：</span>摄影(Photography)是指使用某种专门设备进行影像记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。有人说过：摄影家的能力是把日常生活中稍纵即逝的平凡事物转化为不朽的视觉图像。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <h2 style="margin-top: 50px;">相关职业</h2>
            <!-- 相关职业(轮播效果)(含js) -->
            <div class="carousel">
                <div class="carousel-wrapper">
                    <div class="img-page1">
                        <!-- <h3>Web前端工程师</h3> -->
                        <a
                            href="https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88/10410690#:~:text=%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%98%AF%E4%BA%92%E8%81%94%E7%BD%91%E6%97%B6%E4%BB%A3%E8%BD%AF%E4%BB%B6%E4%BA%A7%E5%93%81%E7%A0%94%E5%8F%91%E4%B8%AD%E4%B8%8D%E5%8F%AF%E7%BC%BA%E5%B0%91%E7%9A%84%E4%B8%80%E7%A7%8D%E4%B8%93%E4%B8%9A%E7%A0%94%E5%8F%91%E8%A7%92%E8%89%B2%E3%80%82%20%E4%BB%8E%E7%8B%AD%E4%B9%89%E4%B8%8A%E8%AE%B2%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E4%BD%BF%E7%94%A8,HTML%E3%80%81CSS%E3%80%81JavaScript%20%E7%AD%89%E4%B8%93%E4%B8%9A%E6%8A%80%E8%83%BD%E5%92%8C%E5%B7%A5%E5%85%B7%E5%B0%86%E4%BA%A7%E5%93%81UI%E8%AE%BE%E8%AE%A1%E7%A8%BF%E5%AE%9E%E7%8E%B0%E6%88%90%E7%BD%91%E7%AB%99%E4%BA%A7%E5%93%81%EF%BC%8C%E6%B6%B5%E7%9B%96%E7%94%A8%E6%88%B7PC%E7%AB%AF%E3%80%81%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%BD%91%E9%A1%B5%EF%BC%8C%E5%A4%84%E7%90%86%E8%A7%86%E8%A7%89%E5%92%8C%E4%BA%A4%E4%BA%92%E9%97%AE%E9%A2%98%E3%80%82">
                            <li class="img1"><img src="./兰/images/web前端工程师1.png" alt=""></li>
                        </a>
                        <!-- <h3>移动UI设计师</h3> -->
                        <a href="https://baike.baidu.com/item/UI%E8%AE%BE%E8%AE%A1%E5%B8%88/8881893">
                            <li class="img1"><img src="./兰/images/移动UI设计师1.png" alt=""></li>
                        </a>
                        <!-- <h3>软件开发工程师</h3> -->
                        <a
                            href="https://baike.baidu.com/item/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B%E5%B8%88?fromtitle=%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88&fromid=8521637&fromModule=lemma_search-box">
                            <li class="img1"> <img src="./兰/images/软件开发工程师1.png" alt=""></li>
                        </a>
                        <!-- <h3>软件测试工程师</h3> -->
                        <a
                            href="https://baike.baidu.com/item/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E5%B7%A5%E7%A8%8B%E5%B8%88?fromModule=lemma_search-box">
                            <li class="img1"><img src="./兰/images/软件测试工程师1.png" alt=""></li>
                        </a>
                    </div>
                    <div class="img-page2">
                        <!-- <h3>数据分析师</h3> -->
                        <a
                            href="https://baike.baidu.com/item/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90%E5%B8%88?fromModule=lemma_search-box">
                            <li class="img1"><img src="./兰/images/数据分析师1.png" alt=""></li>
                        </a>
                        <!-- <h3>后端开发工程师</h3> -->
                        <a
                            href="https://baike.baidu.com/item/%E5%90%8E%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88?fromModule=lemma_search-box">
                            <li class="img1"><img src="./兰/images/后端开发工程师1.png" alt=""></li>
                        </a>
                        <div class="placeholder"></div>
                        <div class="placeholder"></div>
                    </div>
                </div>

                <ul class="container-pagination1">
                    <li class="dot1 active"></li>
                    <li class="dot1"></li>
                </ul>
            </div>

            <!-- 常用软件 -->
            <style>
                .soft {
                    margin-left: 20px;
                    background-color: whitesmoke;
                    padding: 15px;
                    width: 95%;
                    margin-top: 30px;
                }

                .soft>div {
                    display: flex;
                }

                .soft>div:hover {
                    background-color: rgb(132, 126, 126);
                    opacity: 0.5;
                    color: white;
                }

                .soft>div>a:nth-child(2n) {
                    position: absolute;
                    right: 3%;
                }

                .soft>div>a {
                    display: flex;
                    color: gray;

                }

                .soft>div>a:hover {
                    color: white;
                }
            </style>
            <h2 style="margin-top: 50px;">常用软件</h2>
            <div class="soft" style="color: gray; display: flex;justify-content: flex-start;flex-direction: column;">
                <!-- ↓字体灰色 -->

                <!-- vscode -->
                <div>
                    <a href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code 官方网站下载</a>
                    <a href="https://blog.csdn.net/leah126/article/details/131661331" target="_blank">安装教程</a>
                </div>
                <!-- CoffeeCup HTML Editor -->
                <div>
                    <a href="https://www.xitongzhijia.net/soft/196501.html" target="_blank"> CoffeeCup HTML
                        Editor(HTML编辑器) V16.1 免费版
                    </a>
                    <a href="https://www.youngdown.com/article/15544.html" target="_blank">安装教程</a>
                </div>
                <!-- eclipse -->
                <div>
                    <a href="https://www.eclipse.org/downloads/" target="_blank">eclipse 官方网站下载</a>
                    <a href="https://blog.csdn.net/qq_45344586/article/details/123942685" target="_blank">安装教程</a>
                </div>
                <!-- ps -->
                <div>
                    <a href="https://www.xitongzhijia.net/soft/240523.html" target="_blank">Adobe Photoshop 2022
                        V23.2.0.277 ACR14.2
                        中文特别版</a>
                    <a href="https://blog.csdn.net/weixin_48921687/article/details/136604439" target="_blank">安装教程</a>
                </div>
                <!-- EditPlus -->
                <div>
                    <a href="https://www.editplus.com/download.html" target="_blank">EditPlus 官方网站下载</a>
                    <a href="https://blog.csdn.net/zcs2312852665/article/details/134953812" target="_blank">安装教程</a>
                </div>

                <!-- paint.net -->
                <div>
                    <a href="https://www.xitongzhijia.net/soft/242064.html" target="_blank">Paint.NET(图像处理工具) V4.3.9 官方版
                    </a>
                    <a href="https://www.jb51.net/softjc/726862_all.html" target="_blank">安装教程</a>
                </div>
                <!-- netbeans -->
                <div>
                    <a href="https://netbeans.apache.org/front/main/download/index.html" target="_blank">NetBeans
                        官方网站下载</a>
                    <a href="https://blog.csdn.net/weixin_45942827/article/details/106862685" target="_blank">安装教程</a>
                </div>
                <!-- Enterprise Architect -->
                <div>
                    <a href="https://sparxsystems.cn/products/ea/" target="_blank">Enterprise Architect 官方网站下载</a>
                    <a href="https://blog.csdn.net/lfdfhl/article/details/134536376" target="_blank">安装教程</a>
                </div>
                <!-- Bootstrap -->
                <div>
                    <a href="https://v4.bootcss.com/" target="_blank">Bootstrap 官方网站下载</a>
                    <a href="https://blog.csdn.net/weixin_46508271/article/details/118651894" target="_blank">安装教程</a>
                </div>
                <!-- Github -->
                <div>
                    <a href="https://github.com/" target="_blank">Github 官方网站下载</a>
                    <a href="https://blog.csdn.net/ChinarCSDN/article/details/78726040" target="_blank">安装教程</a>
                </div>

            </div>

            <!-- 热门搜索（分两栏，一栏四条） -->
            <style>
                .hot>div>dd {
                    background-color: whitesmoke;
                    width: 100%;
                    border: 10px white solid;
                }
            </style>
            <h2 style="margin-top: 50px;">热门搜索</h2>
            <div class="hot" style="margin-top: 30px;">


                <!-- 热搜条（顺序暂定，后续会调整） -->
                <div class="zuo">
                    <dd>
                        <div>
                            <!-- hotRank1、2、3、Default作为背景图片插入 -->
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span style="color: red;">1</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">响应式布局</a>

                                <span style="margin-left: 80%;">6.7w</span>

                            </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span style="color: orange;">2</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">flex布局</a>

                                <span style="margin-left: 81.5%;">5.3w</span>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span style="color: orange;">3</span>

                                <a href="./瑜-ps/a-ps.html" style="margin-left: 1%;">PS抠图技术</a>

                                <span style="margin-left: 79.8%;">5.1w</span>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span>4</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">网页小游戏</a>

                                <span style="margin-left: 80%;">4.8w</span>
                            </div>
                        </div>
                    </dd>
                </div>
                <div class="you">
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span>5</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">个人简历网页制作</a>

                                <span style="margin-left: 76.7%;">4.6w</span>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span>6</span>

                                <a href="./兰/摄影.html" style="margin-left: 1%;">摄影构图技术</a>

                                <span style="margin-left: 78.9%;">4.2w</span>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span>7</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">时钟与计算器</a>

                                <span style="margin-left: 78.9%;">3.3w</span>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div>
                            <div style="padding-top: 10px;padding-bottom: 10px;margin-left: 5px;">
                                <span>8</span>

                                <a href="./li/hcj.html" style="margin-left: 1%;">js入门</a>

                                <span style="margin-left: 82.3%;">1.8w</span>
                            </div>
                        </div>
                    </dd>

                </div>

            </div>

        </div>
        <!-- 网站介绍（视频和文段介绍待定） -->
        <div style="text-align: center;">
            <h2 style="margin-top: 50px;margin-bottom: 30px;">网站介绍</h2>
            <video src="./兰/media/learn.mp4" controls width="70%"></video>
            <!-- 注意调整行距、字符间距、字体大小、颜色、开头空两个字符 -->
            <p
                style="text-align:left;border: 2px solid rgb(172, 196, 203);border-radius: 20px;padding: 15px;font-family: '华文楷体';font-size: 20px;width: 80%;display: flex;margin-left: 10%;margin-bottom: 50px;">
                蓝学网是一个提供学习资源和讲授精品课程的网站，介绍了三个大板块，分别是Web前端、PS和摄影，Web前端又分为html、css和js，其中包含丰富的图文、视频等资源，可以带您快速入门该课程。真正努力的人都有一个共性：那就是有了目标之后，不犹豫，不等待，执行力惊人，效果不好就复盘优化，效果好就乘胜追击，不断深耕。“一如少年，乘风破浪，去看更大的世界，去发现更多的可能”，真正想要的东西，不只是踮踮脚尖那么简单，所有的收获，一定要全力以赴奋不顾身。蓝学网以传授知识为主，以学习者为主体、以教育者为主导，以能力教育为教学目的，以呈现学习资源为主要特征，带您走进更广阔的世界。本网站的资源皆来自于网络，如数字化成长空间、菜鸟教程、思缘教程网等等，如有不恰当的地方请指出，谢谢！
            </p>
        </div>

        <!-- 页脚（含仓库） -->
        <div
            style="text-align: center;background-color:rgb(200, 225, 225);margin-bottom: 0; height: 280px;display: flex;align-items: flex-end;justify-content: center;">
            <!-- 页脚框架 -->
            <div>
                <div>
                    <!-- logo为单独一行 -->
                    <div>
                        <img style="width: 100px;height: 100px;" src="./兰/images/logo.png" alt="">
                    </div>
                    <!-- csdn二维码和w3cschool二维码 为一行 -->
                    <div>
                        <img style="width: 100px;height: 100px;" src="./兰/images/csdn二维码.png" alt="">
                        <img style="width: 100px;height: 100px; margin-left: 50px;" src="./兰/images/w3cschool二维码.png"
                            alt="">
                    </div>
                </div>

                <!-- （一行白字）相关链接、版权声明等 -->
                <div>
                    <style>
                        a {
                            color: black;
                        }
                    </style>
                    <a href="" target="_blank">相关链接</a>
                    <a href="" target="_blank">隐私政策</a>
                    <a href="" target="_blank">版权声明</a>
                    <a href="" target="_blank">反馈箱</a>
                    <a href="https://gitee.com/lhuilan/final-group-task/tree/main/" target="_blank">代码仓库</a>
                    <a href="./兰/小组.html" target="_blank">关于我们</a>
                </div>

                <!-- 灰白字体 -->
                <div>
                    <div>
                        &copy; 2024-现在 蓝学网 &nbsp; 网站建设：
                        <a href="./兰/小组.html" target="_blank">顺职软件一班第八组</a>
                    </div>
                    <div>
                        网站维护：<a href="./兰/小组.html" target="_blank">顺职软件一班第八组</a>&nbsp;&nbsp;&nbsp;联系方式：lanxuewang@qq.com
                    </div>
                </div>
            </div>
        </div>


    </div>


    <script src="./哲/轮播图一.js"></script>
    <script src="./哲/轮播图二.js"></script>
    <script src="./哲/搜索.js"></script>
</body>

</html>